<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>休闲网登录页面</title>
        <style>
            ul,
            li {
                list-style: none;
            }
            
            .register {
                width: 350px;
                margin: 5px auto;
                border: 1px #cccccc solid;
                border-radius: 5px;
                background: #efefef;
                clear: both;
            }
            
            .register li {
                height: 35px;
                line-height: 35px;
            }
            
            .register span {
                display: inline-block;
                width: 80px;
                text-align: right;
            }
            
            .register li:last-of-type {
                padding-left: 90px;
            }
        </style>

    </head>

    <body>
        <div class="register">
            <form action="#" id="myform" method="post" name="myform">
                <ul>
                    <li class="bold">登录休闲网</li>
                    <li><span>Email：</span><input type="text" class="inputs" value="请输入正确的电子邮箱" /></li>
                    <li><span>密码：</span><input type="password" class="inputs" /></li>
                    <li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
                </ul>
            </form>
        </div>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(document).ready(function() {
                $("#myform").submit(function() {
                    var mail = $("#myform :text").val();
                    if(mail == "") { //检测Email是否为空
                        alert("Email不能为空");
                        $("#myform :text").focus();
                        return false;
                    }
                    if(mail.indexOf("@") == -1 || mail.indexOf(".") == -1) {
                        alert("Email格式不正确\n必须包含符号@和.");
                        $("#myform :text").select();
                        return false;
                    }
                    return true;
                });
            })

            $("#myform :text").focus(function() {
                if($(this).val() == "请输入正确的电子邮箱") {
                    $(this).val("");
                    $(this).css("border", "1px solid #ff0000");
                }
            });
        </script>

    </body>

</html>